<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>       
        <script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type="text/javascript" src="../../js/ctp/ajaxtree/ctp.ui.ajaxtree.js">
        </script>
		<link href="../../css-debug/ajaxtree.css" rel="stylesheet" type="text/css"/>		
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/grid/jquery.jeditable_g.js"></script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
		<script type="text/javascript" src="../../js/ctp/data/ctp.data.js"></script>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
       //ctp.core.log.lvl=ctp.core.loglvl.obj;
	   var CTP_WEB_FULLPATH ="/icbc/ctpdemo/";
	   var CTP_WEB_FULLPATH=0;
			$(document).ready(function(){ 			                 
               
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '重新加载数据',
                    width: '100%',
                    onClick: function(){
                        tmpTree1.loadData('node.js',{id:'1'});
                    }
                });
                var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '设置当前选择的节点为不选',
                    width: '100%',
                    onClick: function(){
                        tmpTree1.setCheck(false);
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '设置当前选择的节点为已选',
                    width: '100%',
                    onClick: function(){
                        tmpTree1.setCheck(true);
                    }
                });				
                var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '获取当前所选节点ID',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'当前被点击节点的ID号为',message:tmpTree1.settings.currentId});
                    }
                });
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '设置当前所选全部节点的ID集合',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'多选框为选择状态的节点集合',message:tmpTree1.getAllChecked()});
                    }
                });	
				var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '获取拖动树拖动后的结果（右树）',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'获取拖动树拖动后的结果',message:ctp.data.jsonToStr(tmpTree2.getJsonVal())});
                    }
                });
				var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '给当前节点添加一个节点（右树）',
                    width: '100%',
                    onClick: function(){
						tmpTree2.addNewNode("123","aaa",false);
                    }
                });
				 var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '删除当前节点',
                    width: '100%',
                    onClick: function(){
						tmpTree1.delNode(tmpTree1.settings.currentId);
                    }
                });
				 var button11=new ctp.ui.button({
	                    id: 'button11',
	                    text: '点击ID为3的节点',
	                    width: '100%',
	                    onClick: function(){
							tmpTree1.clickItem('3');
	                    }
	                }); 
				 var button12=new ctp.ui.button({
	                    id: 'button12',
	                    text: '获取当前半选状态集合',
	                    width: '100%',
	                    onClick: function(){
							alert(tmpTree1.getChecked(2));
	                    }
	                });       
					var store = new ctp.data.store({
                    id: 'store',
                    url: 'root.js',
                    stores:[
                    		{id:"storeId3",
                    		 adapter:{
                    		 			root:"r1",//默认不输入时为根节点
                    		 			keyField:"id",//主键字段
                    		 			totalNumField:"",//总记录数字段
                    		 			//默认不输入则不做任何映射转换
                    		 			fields:[
                    						{id:"id",dataField:"id",dataType:"",dataFormat:"",defaultVal:"" },
                    			  			{id:"name",dataField:"name",dataType:"",dataFormat:"",defaultVal:"" },
                    			  			{id:"des",dataField:"des",dataType:"",dataFormat:"",defaultVal:"" },
                    			  			{id:"status_dict",dataField:"status_dict",dataType:"",dataFormat:"",defaultVal:"" },
                    			  			{id:"dateinfo",dataField:"dateinfo",dataType:"",dataFormat:"",defaultVal:"" }
                    	   		  			]
                    				}
                    		}
                    ]
                });	
 				var tmpTree1 = new ctp.ui.ajaxtree({
			  		id : 'simp1',			//id,默认为ajaxtree
			  		//store:store,
					rootUrl: 'root.js',		//获取ROOT节点的URL，一般推荐使用<ctp:url...
					nodeImgUrlPrefix:'../../images/ajaxtree/',
					checkBox:'1',
					dragNode:false,
					//checkSelfOnly:true,//设置为true的时候，点击的时候不影响父亲，儿子结点的状态
					treeLine:true,
					checkChange: function(id,status){
						ctpMSB.alert({title:'被点击事件的ID和状态',message:"当前被点击节点的ID号为"+id+";当前被点击节点的状态为（0表示未选，1表示选择，2表示半选）："+status});
					},
					onClick:function(id,dataObj){
						alert(id);
                    	alert(dataObj.id);
        				return true;
					}
			  });		  
			  //tmpTree1.enableTreeLines(true);
			  //tmpTree1.createDom();
			  var tmpTree2 = new ctp.ui.ajaxtree({
			  		id : 'simp2',			//id,默认为ajaxtree
			  		store:store,
					rootUrl: 'root.js',		//获取ROOT节点的URL，一般推荐使用<ctp:url...
					nodeImgUrlPrefix:'../../images/ajaxtree/',
					targetAble:true,
					dragChange:function(){alert("ok");}
			  });	
			 // tmpTree2.setImageArrays("minus","minus.gif","minus2.gif","minus3.gif","minus4.gif","minus5.gif");
			 // tmpTree2.setImageArrays("plus","plus.gif","plus2.gif","plus3.gif","plus4.gif","plus5.gif");	  
			 // tmpTree2.createDom();
			  var label1=new ctp.ui.label({id:'label1',text:'带CHECKBOX的异步树',width:'100%'});
			  var label2=new ctp.ui.label({id:'label2',text:'可拖，带链接的异步树',width:'100%'});
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '98%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
					items: [[{element: label1},{element: label2}],
							[{element: tmpTree1},{element: tmpTree2}]]
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button3}],
						 [{element: button4},{element: button5}],
						 [{element: button6},{element: button7}],
						 [{element: button8},{element: button9}],
						 [{element: button10},{element:button11}],
						 [{element:button12}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				var panel1 =new ctp.ui.panel({
					id:'panel1',
                    title: 'ajaxtree实例',
                    collapsible: true,
                    width: '50%',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
	  	/* var tmpTree;
            $(function(){
				              tmpTree = new ctp.ui.ajaxtree({
			  		id : 'simp',			//id,默认为ajaxtree
					rootUrl: 'root.js',		//获取ROOT节点的URL，一般推荐使用<ctp:url...
					checkBox:'1',
					dragNode:false,
					checkChange: function(id,status){
						alert("id="+id+";status="+status);
					}//,
					//renderTo:panel1
			  });
			  //tmpTree.setImageArrays("minus","minus.gif","minus2.gif","minus3.gif","minus4.gif","minus5.gif");
			  //tmpTree.setImageArrays("plus","plus.gif","plus2.gif","plus3.gif","plus4.gif","plus5.gif");
			  //tmpTree.enableTreeLines(false);			  
			  tmpTree.createDom();
			  //tmpTree.renderTo(panel1);
              var panel1=new ctp.ui.panel({
			  	id:'panel0',
			  	title: 'ctp panel',
			  	collapsible: true,
			  	renderTo: 'container1',
				//largeRenderTo:'container1',
				visible:'false',
				html:'panelhtml',
				width:"500px",
				height:"500px",
				btnstatus : true,
				items:[tmpTree]
			  });

            });*/
        </script>
    </head>
    <BODY>
    	<b>ctp.ui.ajaxTree实例</b><hr/><br/>
		<div id="container1">
		</div> 
</BODY>
</html>